{% extends 'base.html' %}
{% load static %}

{% block title %}{% if form.instance.pk %}Update User{% else %}Create New User{% endif %} | TaskFlow{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card shadow-sm border-0 rounded-lg">
                <div class="card-header bg-primary text-white">
                    <h2 class="h4 mb-0">
                        <i class="fas {% if form.instance.pk %}fa-user-edit{% else %}fa-user-plus{% endif %} me-2"></i>
                        {% if form.instance.pk %}Update User{% else %}Create New User{% endif %}
                    </h2>
                </div>
                <div class="card-body p-4">
                    <form method="post" class="needs-validation" novalidate>
                        {% csrf_token %}
                        
                        <div class="row g-4">
                            <!-- Left Column -->
                            <div class="col-md-6">
                                <!-- Email -->
                                <div class="mb-3">
                                    <label for="{{ form.email.id_for_label }}" class="form-label fw-bold">
                                        <i class="fas fa-envelope me-2 text-primary"></i>Email Address
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-at"></i></span>
                                        {{ form.email }}
                                    </div>
                                    {% if form.email.help_text %}
                                        <div class="form-text">{{ form.email.help_text|safe }}</div>
                                    {% endif %}
                                    {% if form.email.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.email.errors|join:", " }}
                                        </div>
                                    {% endif %}
                                </div>
                                <!-- Password -->
                                <div class="mb-3">
                                    <label for="{{ form.password1.id_for_label }}" class="form-label fw-bold">
                                        <i class="fas fa-key me-2 text-primary"></i>Password
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                        <input type="password" 
                                               name="{{ form.password1.name }}" 
                                               id="{{ form.password1.id_for_label }}" 
                                               class="form-control {% if form.password1.errors %}is-invalid{% endif %}"
                                               {% if not form.instance.pk %}required{% endif %}>
                                        <button class="btn btn-outline-secondary toggle-password" type="button">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    {% if form.password1.help_text %}
                                        <div class="form-text">{{ form.password1.help_text|safe }}</div>
                                    {% endif %}
                                    {% if form.password1.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.password1.errors|join:", " }}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <!-- Confirm Password -->
                                <div class="mb-3">
                                    <label for="{{ form.password2.id_for_label }}" class="form-label fw-bold">
                                        <i class="fas fa-key me-2 text-primary"></i>Confirm Password
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                        <input type="password" 
                                               name="{{ form.password2.name }}" 
                                               id="{{ form.password2.id_for_label }}" 
                                               class="form-control {% if form.password2.errors %}is-invalid{% endif %}"
                                               {% if not form.instance.pk %}required{% endif %}>
                                        <button class="btn btn-outline-secondary toggle-password" type="button">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    {% if form.password2.help_text %}
                                        <div class="form-text">{{ form.password2.help_text|safe }}</div>
                                    {% endif %}
                                    {% if form.password2.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.password2.errors|join:", " }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <!-- Right Column -->
                            <div class="col-md-6">
                                <!-- First Name -->
                                <div class="mb-3">
                                    <label for="{{ form.first_name.id_for_label }}" class="form-label fw-bold">
                                        <i class="fas fa-user me-2 text-primary"></i>First Name
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                                        <input type="text" 
                                               name="{{ form.first_name.name }}" 
                                               id="{{ form.first_name.id_for_label }}" 
                                               class="form-control {% if form.first_name.errors %}is-invalid{% endif %}" 
                                               value="{{ form.first_name.value|default:'' }}">
                                    </div>
                                    {% if form.first_name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.first_name.errors|join:", " }}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <!-- Last Name -->
                                <div class="mb-3">
                                    <label for="{{ form.last_name.id_for_label }}" class="form-label fw-bold">
                                        <i class="fas fa-user me-2 text-primary"></i>Last Name
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                                        <input type="text" 
                                               name="{{ form.last_name.name }}" 
                                               id="{{ form.last_name.id_for_label }}" 
                                               class="form-control {% if form.last_name.errors %}is-invalid{% endif %}" 
                                               value="{{ form.last_name.value|default:'' }}">
                                    </div>
                                    {% if form.last_name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.last_name.errors|join:", " }}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <!-- Phone Number -->
                                <div class="mb-3">
                                    <label for="{{ form.phone_number.id_for_label }}" class="form-label fw-bold">
                                        <i class="fas fa-phone me-2 text-primary"></i>Phone Number
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                        <input type="tel" 
                                               name="{{ form.phone_number.name }}" 
                                               id="{{ form.phone_number.id_for_label }}" 
                                               class="form-control {% if form.phone_number.errors %}is-invalid{% endif %}" 
                                               value="{{ form.phone_number.value|default:'' }}">
                                    </div>
                                    {% if form.phone_number.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.phone_number.errors|join:", " }}
                                        </div>
                                    {% endif %}
                                </div>
    
                                <!-- Role and Department -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="{{ form.role.id_for_label }}" class="form-label fw-bold">
                                                <i class="fas fa-user-tag me-2 text-primary"></i>User Role
                                            </label>
                                            <select name="{{ form.role.name }}" id="{{ form.role.id_for_label }}" 
                                                    class="form-select {% if form.role.errors %}is-invalid{% endif %}">
                                                <option value="">Select a role...</option>
                                                {% for value, label in form.role.field.choices %}
                                                    <option value="{{ value }}" 
                                                            {% if form.role.value|stringformat:'s' == value|stringformat:'s' %}selected{% endif %}>
                                                        {{ label }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                            {% if form.role.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {{ form.role.errors|join:", " }}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="{{ form.department.id_for_label }}" class="form-label fw-bold">
                                                <i class="fas fa-building me-2 text-primary"></i>Department
                                            </label>
                                            <select name="{{ form.department.name }}" id="{{ form.department.id_for_label }}" 
                                                    class="form-select {% if form.department.errors %}is-invalid{% endif %}">
                                                <option value="">Select a department...</option>
                                                {% for value, label in form.department.field.choices %}
                                                    <option value="{{ value }}" 
                                                            {% if form.department.value|stringformat:'s' == value|stringformat:'s' %}selected{% endif %}>
                                                        {{ label }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                            {% if form.department.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {{ form.department.errors|join:", " }}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Is Active Toggle -->
                                <div class="form-check form-switch mb-4">
                                    <input type="checkbox" name="is_active" id="id_is_active" 
                                           class="form-check-input" {% if form.is_active.value %}checked{% endif %}>
                                    <label for="id_is_active" class="form-check-label fw-bold">
                                        <i class="fas {% if form.is_active.value %}fa-user-check text-success{% else %}fa-user-times text-danger{% endif %} me-2"></i>
                                        Account Active
                                    </label>
                                    <div class="form-text">Uncheck to deactivate this user account</div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Form Actions -->
                        <div class="d-flex justify-content-between align-items-center mt-4 pt-3 border-top">
                            <a href="{% if form.instance.pk %}{% url 'users:user_detail' form.instance.pk %}{% else %}{% url 'users:user_list' %}{% endif %}" 
                               class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-2"></i>Cancel
                            </a>
                            <div>
                                {% if form.instance.pk %}
                                    <a href="{% url 'users:user_delete' form.instance.pk %}" class="btn btn-danger me-2">
                                        <i class="fas fa-trash-alt me-2"></i>Delete User
                                    </a>
                                {% endif %}
                                <button type="submit" class="btn btn-primary px-4">
                                    <i class="fas {% if form.instance.pk %}fa-save{% else %}fa-user-plus{% endif %} me-2"></i>
                                    {% if form.instance.pk %}Update{% else %}Create{% endif %} User
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Toggle password visibility
function setupPasswordToggle(button) {
    button.addEventListener('click', function() {
        const input = this.previousElementSibling;
        const icon = this.querySelector('i');
        
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    });
}

// Initialize when document is ready
document.addEventListener('DOMContentLoaded', function() {
    // Initialize password toggles
    document.querySelectorAll('.toggle-password').forEach(button => {
        setupPasswordToggle(button);
    });
    
    // Form validation
    const forms = document.querySelectorAll('.needs-validation');
    Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });
    
    // Toggle active status icon
    const isActiveCheckbox = document.getElementById('id_is_active');
    if (isActiveCheckbox) {
        const icon = isActiveCheckbox.nextElementSibling.querySelector('i');
        // Set initial state
        if (isActiveCheckbox.checked) {
            icon.classList.remove('fa-user-times', 'text-danger');
            icon.classList.add('fa-user-check', 'text-success');
        } else {
            icon.classList.remove('fa-user-check', 'text-success');
            icon.classList.add('fa-user-times', 'text-danger');
        }
        
        // Handle changes
        isActiveCheckbox.addEventListener('change', function() {
            if (this.checked) {
                icon.classList.remove('fa-user-times', 'text-danger');
                icon.classList.add('fa-user-check', 'text-success');
            } else {
                icon.classList.remove('fa-user-check', 'text-success');
                icon.classList.add('fa-user-times', 'text-danger');
            }
        });
    }
});

// Enable Bootstrap form validation
(function() {
  'use strict';
  
  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  const forms = document.querySelectorAll('.needs-validation')
  
  // Loop over them and prevent submission
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }
      
      form.classList.add('was-validated')
    }, false)
  })
})()
</script>
{% endblock %}